Išsamus vadovas žiniatinklio kūrėjams ir dizaineriams, kaip naudoti CSS font-feature-settings pažangioms „OpenType“ tipografijos funkcijoms, tokioms kaip ligatūros, kerningas ir stilistiniai rinkiniai, valdyti.
Tipografijos galios atskleidimas: išsami CSS šrifto ypatybių verčių ir „OpenType“ analizė
Interneto dizaino pasaulyje tipografija dažnai yra neįvertinta vartotojo patirties herojė. Mes kruopščiai renkamės šriftų šeimas, svorius ir dydžius, kad sukurtume aiškią ir estetiškai patrauklią sąsają. Bet kas, jei galėtume pasigilinti? Kas, jei šriftų failai, kuriuos naudojame kasdien, slėptų paslaptis, vedančias į turtingesnę, išraiškingesnę ir profesionalesnę tipografiją? Tiesa ta, kad jie jas slepia. Šios paslaptys vadinamos „OpenType“ ypatybėmis, o CSS suteikia mums raktus joms atrakinti.
Per ilgai atrodė, kad subtilus valdymas, kuriuo mėgavosi spaudos dizaineriai – pavyzdžiui, tikrosios kapitalinės raidės, elegantiškos pasirenkamosios ligatūros ir kontekstą atitinkantys skaitmenų stiliai – yra nepasiekiamas internete. Šiandien taip nebėra. Šis išsamus vadovas nukels jus į kelionę po CSS šrifto ypatybių verčių pasaulį, kurioje išsiaiškinsite, kaip galite panaudoti visą savo interneto šriftų galią, kad sukurtumėte išties įmantrias ir skaitomas skaitmenines patirtis.
Kas tiksliai yra „OpenType“ ypatybės?
Prieš gilinantis į CSS, labai svarbu suprasti, ką mes valdome. „OpenType“ yra šrifto formatas, kuriame gali būti didžiulis duomenų kiekis, neapsiribojantis pagrindinėmis raidžių, skaičių ir simbolių formomis. Šiuose duomenyse šriftų dizaineriai gali įterpti platų pasirenkamų galimybių, vadinamų „ypatybėmis“, spektrą.
Galvokite apie šias ypatybes kaip apie integruotas instrukcijas ar alternatyvius simbolių dizainus (glifus), kuriuos galima programiškai įjungti arba išjungti. Tai nėra programišiai ar naršyklės gudrybės; tai sąmoningi dizaino sprendimai, kuriuos priėmė šriftą sukūręs tipografas. Kai aktyvuojate „OpenType“ ypatybę, jūs prašote naršyklės naudoti konkrečią šrifto dizaino dalį, skirtą tam tikram tikslui.
Šios ypatybės gali būti nuo grynai funkcionalių, pavyzdžiui, skaitomumo gerinimo su geresniais tarpais, iki grynai estetinių, pavyzdžiui, dekoratyvinio elemento pridėjimo antraštėje.
CSS vartai: aukšto lygio savybės ir žemo lygio valdymas
CSS suteikia du pagrindinius būdus pasiekti „OpenType“ ypatybes. Šiuolaikinis, rekomenduojamas požiūris yra naudoti aukšto lygio, semantinių savybių rinkinį. Tačiau taip pat yra žemo lygio, galinga „viską apimanti“ savybė, kai reikia maksimalaus valdymo.
Rekomenduojamas metodas: aukšto lygio savybės
Šiuolaikinis CSS siūlo savybių rinkinį po `font-variant` skėčiu, kartu su `font-kerning`. Jos laikomos gerąja praktika, nes jų pavadinimai aiškiai apibūdina jų paskirtį, todėl jūsų kodas tampa lengviau skaitomas ir prižiūrimas.
- font-kerning: Valdo šrifte saugomos kerningo informacijos naudojimą.
- font-variant-ligatures: Valdo įprastas, pasirenkamąsias, istorines ir kontekstines ligatūras.
- font-variant-numeric: Valdo skirtingus skaičių, trupmenų ir perbraukto nulio stilius.
- font-variant-caps: Valdo didžiųjų raidžių variantus, pavyzdžiui, kapitalines raides.
- font-variant-alternates: Suteikia prieigą prie stilistinių alternatyvų ir simbolių variantų.
Pagrindinis šių savybių privalumas yra tai, kad jūs nurodote naršyklei ką norite pasiekti (pvz., `font-variant-caps: small-caps;`), o naršyklė išsiaiškina geriausią būdą tai padaryti. Jei konkreti ypatybė nėra prieinama, naršyklė gali su tuo susitvarkyti sklandžiai.
Galingas įrankis: `font-feature-settings`
Nors aukšto lygio savybės yra puikios, jos neapima visų galimų „OpenType“ ypatybių. Visiškam valdymui turime žemo lygio `font-feature-settings` savybę. Ji dažnai apibūdinama kaip paskutinės išeities įrankis, tačiau tai neįtikėtinai galingas įrankis.
Sintaksė atrodo taip:
font-feature-settings: "
- Ypatybės žymė: Jautrus raidžių registrui, keturių simbolių eilutė, identifikuojanti konkrečią „OpenType“ ypatybę (pvz., `"liga"`, `"smcp"`, `"ss01"`).
- Reikšmė: Paprastai sveikasis skaičius. Daugeliui ypatybių `1` reiškia „įjungta“, o `0` – „išjungta“. Kai kurios ypatybės, pavyzdžiui, stilistiniai rinkiniai, gali priimti kitas sveikųjų skaičių reikšmes, kad būtų pasirinktas konkretus variantas.
Auksinė taisyklė: Visada pirmiausia stenkitės naudoti aukšto lygio `font-variant-*` savybes. Jei jums reikalinga ypatybė nėra pasiekiama per jas, arba jei reikia derinti ypatybes taip, kaip neleidžia aukšto lygio savybės, tada naudokite `font-feature-settings`.
Praktinė dažniausiai naudojamų „OpenType“ ypatybių apžvalga
Panagrinėkime keletą naudingiausių ir įdomiausių „OpenType“ ypatybių, kurias galite valdyti su CSS. Kiekvienai iš jų apžvelgsime jos paskirtį, 4 simbolių žymę ir CSS, skirtą jai įjungti.
1 kategorija: Ligatūros – grakštus simbolių sujungimas
Ligatūros yra specialūs glifai, kurie sujungia du ar daugiau simbolių į vieną, harmoningesnę formą. Jos yra būtinos norint išvengti nepatogių simbolių susidūrimų ir pagerinti teksto tėkmę.
Standartinės ligatūros
- Žymė: `liga`
- Paskirtis: Pakeisti dažnas, problemiškas simbolių kombinacijas, tokias kaip `fi`, `fl`, `ff`, `ffi` ir `ffl`, vienu specialiai sukurtu glifu. Tai pagrindinė skaitomumo ypatybė daugelyje šriftų.
- Aukšto lygio CSS: `font-variant-ligatures: common-ligatures;` (dažnai naršyklėse įjungta pagal nutylėjimą)
- Žemo lygio CSS: `font-feature-settings: "liga" 1;`
Pasirenkamosios ligatūros
- Žymė: `dlig`
- Paskirtis: Tai labiau dekoratyvios ir stilistinės ligatūros, pavyzdžiui, kombinacijoms `ct`, `st` ar `sp`. Jos nėra būtinos skaitomumui ir turėtų būti naudojamos selektyviai, dažnai antraštėse ar logotipuose, norint pridėti elegancijos.
- Aukšto lygio CSS: `font-variant-ligatures: discretionary-ligatures;`
- Žemo lygio CSS: `font-feature-settings: "dlig" 1;`
2 kategorija: Skaitmenys – tinkamas skaičius tinkamoje vietoje
Ne visi skaičiai yra vienodi. Geras šriftas pateikia skirtingus skaitmenų stilius skirtingiems kontekstams, o jų valdymas yra profesionalios tipografijos požymis.
Senojo stiliaus ir standartiniai skaitmenys
- Žymės: `onum` (Senojo stiliaus), `lnum` (Standartiniai)
- Paskirtis: Standartiniai skaitmenys yra įprasti skaičiai, kuriuos matome visur – visi vienodo aukščio, lygiuojasi su didžiosiomis raidėmis. Jie puikiai tinka lentelėms, diagramoms ir vartotojo sąsajoms, kur skaičiai turi būti išlygiuoti vertikaliai. Senojo stiliaus skaitmenys, priešingai, turi kintantį aukštį su viršutinėmis ir apatinėmis iškyšomis, panašiai kaip mažosios raidės. Tai leidžia jiems sklandžiai įsilieti į teksto pastraipą, neatkreipiant į save per daug dėmesio.
- Aukšto lygio CSS: `font-variant-numeric: oldstyle-nums;` arba `font-variant-numeric: lining-nums;`
- Žemo lygio CSS: `font-feature-settings: "onum" 1;` arba `font-feature-settings: "lnum" 1;`
Proporciniai ir tabeliniai skaitmenys
- Žymės: `pnum` (Proporciniai), `tnum` (Tabeliniai)
- Paskirtis: Tai valdo skaičių plotį. Tabeliniai skaitmenys yra fiksuoto pločio – kiekvienas skaičius užima lygiai tiek pat horizontalios erdvės. Tai yra kritiškai svarbu finansinėms ataskaitoms, kodui ar bet kokiai duomenų lentelei, kur skaičiai skirtingose eilutėse turi būti tobulai išlygiuoti stulpeliuose. Proporciniai skaitmenys turi kintamą plotį; pavyzdžiui, skaičius '1' užima mažiau vietos nei skaičius '8'. Tai sukuria tolygesnius tarpus ir idealiai tinka naudoti rišliame tekste.
- Aukšto lygio CSS: `font-variant-numeric: proportional-nums;` arba `font-variant-numeric: tabular-nums;`
- Žemo lygio CSS: `font-feature-settings: "pnum" 1;` arba `font-feature-settings: "tnum" 1;`
Trupmenos ir perbrauktas nulis
- Žymės: `frac` (Trupmenos), `zero` (Perbrauktas nulis)
- Paskirtis: `frac` ypatybė gražiai formatuoja tekstą, pvz., `1/2`, į tikrą įstrižos trupmenos glifą (½). `zero` ypatybė pakeičia standartinį '0' versija su brūkšneliu ar tašku, kad jį būtų galima aiškiai atskirti nuo didžiosios raidės 'O', o tai yra gyvybiškai svarbu techninėje dokumentacijoje, serijos numeriuose ir kode.
- Aukšto lygio CSS: `font-variant-numeric: diagonal-fractions;` ir `font-variant-numeric: slashed-zero;`
- Žemo lygio CSS: `font-feature-settings: "frac" 1, "zero" 1;`
3 kategorija: Kerningas – tarpų menas
Kerningas
- Žymė: `kern`
- Paskirtis: Kerningas yra tarpų tarp atskirų raidžių porų koregavimo procesas, siekiant pagerinti vizualinį patrauklumą ir skaitomumą. Pavyzdžiui, kombinacijoje „AV“, V yra šiek tiek pakišta po A. Dauguma kokybiškų šriftų turi šimtus ar tūkstančius tokių kerningo porų. Nors jis beveik visada įjungtas pagal nutylėjimą, jūs galite jį valdyti.
- Aukšto lygio CSS: `font-kerning: normal;` (numatytasis) arba `font-kerning: none;`
- Žemo lygio CSS: `font-feature-settings: "kern" 1;` (įjungta) arba `font-feature-settings: "kern" 0;` (išjungta)
4 kategorija: Raidžių registro variantai – daugiau nei didžiosios ir mažosios raidės
Kapitalinės raidės
- Žymės: `smcp` (iš mažųjų raidžių), `c2sc` (iš didžiųjų raidžių)
- Paskirtis: Ši ypatybė įjungia tikrąsias kapitalines raides, kurios yra specialiai sukurti glifai, atitinkantys mažųjų raidžių aukštį, bet turintys didžiųjų raidžių formą. Jos yra daug pranašesnės už „netikras“ kapitalines raides, sukurtas tiesiog sumažinus didžiąsias raides. Naudokite jas akronimams, paantraštėms ar pabrėžimui.
- Aukšto lygio CSS: `font-variant-caps: small-caps;`
- Žemo lygio CSS: `font-feature-settings: "smcp" 1;`
5 kategorija: Stilistinės alternatyvos – dizainerio prisilietimas
Čia tipografija tampa išties išraiškinga. Daugelyje šriftų yra alternatyvių simbolių versijų, kurias galite pakeisti, kad pakeistumėte teksto toną ar stilių.
Stilistiniai rinkiniai
- Žymės: `ss01` iki `ss20`
- Paskirtis: Tai viena iš įdomiausių ypatybių, tačiau ji pasiekiama tik per `font-feature-settings`. Šrifto dizaineris gali sugrupuoti susijusias stilistines alternatyvas į rinkinius. Pavyzdžiui, `ss01` gali aktyvuoti vieno aukšto 'a', `ss02` gali pakeisti 'y' uodegėlę, o `ss03` gali pateikti labiau geometrinį skyrybos ženklų rinkinį. Galimybės priklauso tik nuo šrifto dizainerio.
- Žemo lygio CSS: `font-feature-settings: "ss01" 1;` arba `font-feature-settings: "ss01" 1, "ss05" 1;`
Svašai
- Žymė: `swsh`
- Paskirtis: Svašai yra dekoratyvūs, puošnūs elementai, pridedami prie simbolių, dažnai žodžio pradžioje ar pabaigoje. Jie yra paplitę rankraštiniuose ir dekoratyviniuose šriftuose ir turėtų būti naudojami labai saikingai, siekiant maksimalaus poveikio, pavyzdžiui, inicialui ar vienam žodžiui logotipe.
- Žemo lygio CSS: `font-feature-settings: "swsh" 1;`
Kaip atrasti galimas šrifto ypatybes
Visa tai nuostabu, bet kaip sužinoti, kurias ypatybes jūsų pasirinktas šriftas iš tikrųjų palaiko? Ypatybė veiks tik tuo atveju, jei šrifto dizaineris ją įdiegė į šrifto failą. Štai keletas būdų, kaip tai išsiaiškinti:
- Šriftų paslaugų pavyzdžių puslapiai: Dauguma patikimų šriftų liejyklų ir paslaugų (pvz., „Adobe Fonts“, „Google Fonts“ ir komercinės šriftų liejyklos) nurodys ir pademonstruos palaikomas „OpenType“ ypatybes pagrindiniame šrifto puslapyje. Paprastai tai yra lengviausia vieta pradėti.
- Naršyklės kūrėjo įrankiai: Šiuolaikinės naršyklės tam turi nuostabius įrankius. „Chrome“ ar „Firefox“ naršyklėje patikrinkite elementą, eikite į skirtuką „Computed“ ir slinkite iki pat apačios. Rasite skiltį „Rendered Fonts“, kuri nurodys, kuris šrifto failas naudojamas. „Firefox“ naršyklėje yra specialus skirtukas „Fonts“, kuriame bus aiškiai išvardytos visos galimos pasirinkto elemento šrifto „OpenType“ ypatybių žymės. Tai nepaprastai galingas būdas tyrinėti šrifto galimybes gyvai.
- Darbalaukio šriftų analizės įrankiai: Vietoje įdiegtiems šriftų failams (`.otf`, `.ttf`) galite naudoti specializuotas programas ar svetaines (pvz., wakamaifondue.com), kurios analizuoja šrifto failą ir pateikia išsamią ataskaitą apie visas jo ypatybes, palaikomas kalbas ir glifus.
Našumas ir naršyklių palaikymas
Du dažni rūpesčiai yra našumas ir naršyklių suderinamumas. Geros žinios yra tai, kad abu yra puikūs.
- Naršyklių palaikymas: `font-feature-settings` savybė jau daugelį metų yra plačiai palaikoma visose pagrindinėse naršyklėse. Naujesnės `font-variant-*` savybės taip pat turi puikų palaikymą. Galite jas naudoti užtikrintai.
- Našumas: „OpenType“ ypatybių aktyvavimas turi nereikšmingą poveikį atvaizdavimo našumui. Logika ir alternatyvūs glifai jau yra atsisiųstame šrifto faile; jūs tiesiog nurodote naršyklės atvaizdavimo varikliui, kurias instrukcijas vykdyti. Našumo kaina slypi pačiame šrifto failo dydyje, o ne naudojant jame esančias ypatybes. Šriftas su daugeliu ypatybių gali būti didesnis failas, tačiau jų aktyvavimas iš esmės yra nemokamas.
Geroji praktika ir praktiniai patarimai
Su didele galia ateina didelė atsakomybė. Štai kaip efektyviai ir profesionaliai naudoti šrifto ypatybes.
1. Naudokite ypatybes laipsniškam tobulinimui
Galvokite apie „OpenType“ ypatybes kaip apie patobulinimą. Jūsų tekstas turi būti puikiai skaitomas ir funkcionalus be jų. Senojo stiliaus skaitmenų ar pasirenkamųjų ligatūrų aktyvavimas tiesiog pakelia tipografijos kokybę vartotojams, naudojantiems šiuolaikines naršykles, sukuriant geresnę, labiau nušlifuotą patirtį.
2. Svarbiausia – kontekstas
Netaikykite ypatybių globaliai, nepagalvoję. Taikykite tinkamą ypatybę tinkamoje vietoje.
- Naudokite senojo stiliaus proporcinius skaitmenis pagrindinio teksto pastraipose.
- Naudokite standartinius tabelinius skaitmenis duomenų lentelėse ir kainoraščiuose.
- Naudokite pasirenkamąsias ligatūras ir svašus antraštėms, o ne pagrindiniam tekstui.
- Naudokite kapitalines raides akronimams ar etiketėms, kad jos geriau įsilietų į tekstą.
3. Organizuokite su CSS pasirinktinėmis savybėmis
Kad jūsų kodas būtų švarus ir lengvai prižiūrimas, apibrėžkite savo ypatybių derinius CSS pasirinktinėse savybėse (kintamuosiuose). Tai leidžia lengvai juos nuosekliai taikyti ir atnaujinti iš vienos centrinės vietos.
Pavyzdys:
:root {
--font-features-body: "liga" 1, "onum" 1, "pnum" 1, "kern" 1;
--font-features-heading: "liga" 1, "dlig" 1, "lnum" 1;
--font-features-data: "lnum" 1, "tnum" 1, "zero" 1;
}
body {
font-feature-settings: var(--font-features-body);
}
h1, h2, h3 {
font-feature-settings: var(--font-features-heading);
}
.price, .code, .table-cell {
font-feature-settings: var(--font-features-data);
}
4. Svarbiausia – subtilumas
Geriausia tipografija dažnai yra nematoma. Tikslas yra pagerinti skaitomumą ir estetiką, neatkreipiant dėmesio į pačią techniką. Venkite pagundos įjungti visas įmanomas ypatybes. Keletas gerai parinktų ypatybių, pritaikytų tinkamame kontekste, turės daug didesnį poveikį nei chaotiškas visko mišinys.
Išvada: nauja interneto tipografijos riba
CSS šrifto ypatybių verčių įvaldymas yra transformuojantis žingsnis bet kuriam interneto kūrėjui ar dizaineriui. Tai perkelia mus nuo pagrindinės šrifto dydžių ir svorių nustatymo mechanikos į tikrosios skaitmeninės tipografijos sritį. Suprasdami ir naudodami turtingas ypatybes, įterptas į mūsų šriftus, galime sumažinti ilgalaikį atotrūkį tarp spaudos ir interneto dizaino, kurdami skaitmenines patirtis, kurios yra ne tik funkcionalios ir prieinamos, bet ir tipografiškai gražios bei įmantrios.
Taigi, kitą kartą rinkdamiesi šriftą projektui, nesustokite ties tuo. Pasinerkite į jo dokumentaciją, išnagrinėkite jį su savo naršyklės kūrėjo įrankiais ir atraskite paslėptą galią, kurią jis turi. Eksperimentuokite su ligatūromis, skaitmenimis ir stilistiniais rinkiniais. Jūsų dėmesys šioms detalėms išskirs jūsų darbą ir prisidės prie tobulesnio ir skaitomesnio interneto visiems.